<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>element-starter</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<style>
body,html,#app{
	height:100%;
}
body{padding:0px;margin:0px;}
.el-header, .el-footer {
	color:#fff;
	line-height: 60px;
	height: 60px; 
	background-color: rgb(64, 158, 255);
}
.logo{  padding-left:30px;  float:left; background:url('') no-repeat; background-size:100%;}
.logo img{ 
	height:60px;
}
  
.el-aside {
	color: #333;
	text-align: left;
}
  
.el-main {
	background-color: #E9EEF3;
	color: #333;
	flex: 1;
}
.el-aside, .el-main {
	overflow: auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.el-menu{
	height:100%;
}
.wrapper{
	height:100%;
}
body > .el-container {
	margin-bottom: 40px;
}
  
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}
  
.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
.el-menu{
	border-right:none;
	list-style: none;
	position: relative;
	margin: 0;
	padding-left: 0;
	background-color: #fff;
}
.el-main{
	padding:10px;
}
.nav-item{
	background:#fff;
	height:40px; 
	padding:0 10px;
	border-radius:5px;
}
.table-list{ 
	margin-top:10px;
	border-radius:5px;  
	background-color:#fff; 
	padding:30px 0 20px 0;
}
.el-breadcrumb{
	line-height:40px;
}
.btn-show{ 
	float:left; 
	padding-left:39px;
}
a:hover,a:link{color:#ffff;}
a{color:#ffff;}
.head-text{ float:left; font-weight:bold;}
.admin-info{ float:right; color:#fff; padding-right:20px;}
.el-dropdown{color:#fff;}
  
::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:horizontal {
	border-radius: 6px;
	background: #BDBDBD;
}
 
::-webkit-scrollbar-button {
	display: none;
}
 
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {
	background: -webkit-gradient(linear,left);
}
 
::-webkit-scrollbar-track-piece {
	background: #FFF;
}
</style>
<body>
<div id="app">
<el-container class="wrapper">
  <el-header style="padding:0; margin:0;">
		<div class="logo">后台管理中心 v1.0</div>
		<div class="btn-show">
				<a href="javascript:void(0);" v-if="isCollapse == false" @click="show(1)"><i class="el-icon-menu"></i></a>
				<a href="javascript:void(0);" v-else @click="show(2)"><i class="el-icon-menu"  ></i></a>
		</div>
		
		<div class="admin-info">
		  <el-dropdown>
		  <span class="el-dropdown-link">
			超级管理员：admin <i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
			<el-dropdown-item>个人信息</el-dropdown-item>
			<el-dropdown-item>注销登陆</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
		</div>
  </el-header>
  <el-container>
	<el-aside>
	<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
	  <el-submenu index="1">
		<template slot="title">
		  <i class="el-icon-location"></i>
		  <span slot="title">导航一</span>
		</template>
		<el-menu-item-group>
		  <span slot="title">分组一</span>
		  <el-menu-item index="1-1">选项1</el-menu-item>
		  <el-menu-item index="1-2">选项2</el-menu-item>
		</el-menu-item-group>
		<el-menu-item-group title="分组2">
		  <el-menu-item index="1-3">选项3</el-menu-item>
		</el-menu-item-group>
		<el-submenu index="1-4">
		  <span slot="title">选项4</span>
		  <el-menu-item index="1-4-1">选项1</el-menu-item>
		</el-submenu>
	  </el-submenu>
	  <el-menu-item index="2">
		<i class="el-icon-menu"></i>
		<span slot="title">导航二</span>
	  </el-menu-item>
	  <el-menu-item index="3" disabled>
		<i class="el-icon-document"></i>
		<span slot="title">导航三</span>
	  </el-menu-item>
	  <el-menu-item index="4">
		<i class="el-icon-setting"></i>
		<span slot="title">导航四</span>
	  </el-menu-item>
	  
	  <el-submenu index="1">
		<template slot="title">
		  <i class="el-icon-location"></i>
		  <span slot="title">导航一</span>
		</template>
		<el-menu-item-group>
		  <span slot="title">分组一</span>
		  <el-menu-item index="1-1">选项1</el-menu-item>
		  <el-menu-item index="1-2">选项2</el-menu-item>
		</el-menu-item-group>
		<el-menu-item-group title="分组2">
		  <el-menu-item index="1-3">选项3</el-menu-item>
		</el-menu-item-group>
		<el-submenu index="1-4">
		  <span slot="title">选项4</span>
		  <el-menu-item index="1-4-1">选项1</el-menu-item>
		</el-submenu>
	  </el-submenu>
	  
	  <el-submenu index="1">
		<template slot="title">
		  <i class="el-icon-location"></i>
		  <span slot="title">导航一</span>
		</template>
		<el-menu-item-group>
		  <span slot="title">分组一</span>
		  <el-menu-item index="1-1">选项1</el-menu-item>
		  <el-menu-item index="1-2">选项2</el-menu-item>
		</el-menu-item-group>
		<el-menu-item-group title="分组2">
		  <el-menu-item index="1-3">选项3</el-menu-item>
		</el-menu-item-group>
		<el-submenu index="1-4">
		  <span slot="title">选项4</span>
		  <el-menu-item index="1-4-1">选项1</el-menu-item>
		</el-submenu>
	  </el-submenu>
	  
	  <el-submenu index="1">
		<template slot="title">
		  <i class="el-icon-location"></i>
		  <span slot="title">导航一</span>
		</template>
		<el-menu-item-group>
		  <span slot="title">分组一</span>
		  <el-menu-item index="1-1">选项1</el-menu-item>
		  <el-menu-item index="1-2">选项2</el-menu-item>
		</el-menu-item-group>
		<el-menu-item-group title="分组2">
		  <el-menu-item index="1-3">选项3</el-menu-item>
		</el-menu-item-group>
		<el-submenu index="1-4">
		  <span slot="title">选项4</span>
		  <el-menu-item index="1-4-1">选项1</el-menu-item>
		</el-submenu>
	  </el-submenu>
	  
	  <el-submenu index="1">
		<template slot="title">
		  <i class="el-icon-location"></i>
		  <span slot="title">导航一</span>
		</template>
		<el-menu-item-group>
		  <span slot="title">分组一</span>
		  <el-menu-item index="1-1">选项1</el-menu-item>
		  <el-menu-item index="1-2">选项2</el-menu-item>
		</el-menu-item-group>
		<el-menu-item-group title="分组2">
		  <el-menu-item index="1-3">选项3</el-menu-item>
		</el-menu-item-group>
		<el-submenu index="1-4">
		  <span slot="title">选项4</span>
		  <el-menu-item index="1-4-1">选项1</el-menu-item>
		</el-submenu>
	  </el-submenu>
	</el-menu>


	</el-aside>
   
      <el-main>
	   <div class="nav-item">
		  <el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
		  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
		  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
		</el-breadcrumb>
		</div>  
		
		<div class="table-list">
		<el-form ref="form" :model="form" label-width="80px">
		  <el-form-item label="活动名称">
			<el-input v-model="form.name"></el-input>
		  </el-form-item>
		  <el-form-item label="活动区域">
			<el-select v-model="form.region" placeholder="请选择活动区域">
			  <el-option label="区域一" value="shanghai"></el-option>
			  <el-option label="区域二" value="beijing"></el-option>
			</el-select>
		  </el-form-item>
		  <el-form-item label="活动时间">
			<el-col :span="11">
			  <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
			</el-col>
			<el-col class="line" :span="2">-</el-col>
			<el-col :span="11">
			  <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
			</el-col>
		  </el-form-item>
		  <el-form-item label="即时配送">
			<el-switch v-model="form.delivery"></el-switch>
		  </el-form-item>
		  <el-form-item label="活动性质">
			<el-checkbox-group v-model="form.type">
			  <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
			  <el-checkbox label="地推活动" name="type"></el-checkbox>
			  <el-checkbox label="线下主题活动" name="type"></el-checkbox>
			  <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
			</el-checkbox-group>
		  </el-form-item>
		  <el-form-item label="特殊资源">
			<el-radio-group v-model="form.resource">
			  <el-radio label="线上品牌商赞助"></el-radio>
			  <el-radio label="线下场地免费"></el-radio>
			</el-radio-group>
		  </el-form-item>
		  <el-form-item label="活动形式">
			<el-input type="textarea" v-model="form.desc"></el-input>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="onSubmit">立即创建</el-button>
			<el-button>取消</el-button>
		  </el-form-item>
		</el-form>
	    </div>
	  </el-main>
     
   
  </el-container>
</el-container>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script src="vue.js"></script>
<script src="index.js"></script>
<script>
    var vm = new Vue({
      el: '#app',
      data:{
		isCollapse: false,
		form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
    },methods: {
      handleOpen(key, keyPath) {
	 
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
	
        console.log(key, keyPath);
      },
	  onSubmit() {
        console.log('submit!');
      },
	  show(type){
		if(type == 1){
			$(".el-aside").css('width',"auto");
			$(".btn-show").css('padding-left','20px');
			$(".logo").hide();
			vm.isCollapse = true;
			
		}else{
			$(".btn-show").css('padding-left','39px');
			vm.isCollapse = false;
			$(".logo").show();
		}
	  }
    }
})
</script>


</html>